<template>
  <div class="search-box">
    <el-form ref="info" :model="info" class="botLeft  flex-wrap " label-width="110px">
      <el-form-item class="elFormItem" label="渠道来源">
        <el-select filterable clearable style="width:100%" v-model.trim="info.pricegroupId" placeholder="请选择渠道来源">
          <el-option v-for="(item,index) in sourceList" :key="index" :label="item.head.pname" :value="item.head.pricegroupId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="elFormItem" label="订单号">
        <el-input clearable v-model.trim="info.orderCode" placeholder="请输入订单号" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item class="elFormItem" label="下单日期">
        <el-date-picker style=" width: 100%;" v-model="dateSelect" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="left">
        </el-date-picker>
      </el-form-item>
      <el-form-item class="elFormItem" label="邀约码">
        <el-input v-model.trim="info.inviteCode" clearable placeholder="请输入邀约码" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item class="elFormItem" label="激活情况">
        <el-select style="width:100%" filterable clearable v-model.trim="info.isActive" placeholder="请选择激活情况">
          <el-option v-for="(item,index) in activation_status" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="elFormItem" label="是否录脸">
        <el-select style="width:100%" filterable clearable v-model.trim="info.haveEnterFace" placeholder="请选择">
          <el-option key="0" label="是" value="true"></el-option>
          <el-option key="1" label="否" value="false"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="elFormItem" label="门票类型">
        <el-select style="width:100%" filterable clearable v-model.trim="info.state" placeholder="请选择">
          <el-option key="0" label="团体" value="1"></el-option>
          <el-option key="1" label="个人" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="elFormItem" label="激活日期">
        <el-date-picker style=" width: 100%;" v-model="dateSelect" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="left">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="showMoreS" class="elFormItem" label="邀约码发放时间">
        <el-date-picker style=" width: 100%;" v-model="dateSelect" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="left">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-if="showMoreS" class="elFormItem" label="门票名称">
        <el-input v-model.trim="info.tTypeName" clearable placeholder="请输入门票名称" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item v-if="showMoreS" class="elFormItem" label="购买人姓名">
        <el-input v-model.trim="info.bName" clearable placeholder="请输入购买人姓名" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item v-if="showMoreS" class="elFormItem" label="购买人手机号">
        <el-input v-model.trim="info.bTel" clearable placeholder="请输入购买人手机号" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item v-if="showMoreS" class="elFormItem" label="购票实付金额">
        <el-input v-model.trim="info.realPrice" clearable placeholder="请输入实付金额" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item v-if="showMoreS" class="elFormItem" label="备注">
        <el-input v-model.trim="info.detail" clearable placeholder="请输入备注" style="width:100%"></el-input>
      </el-form-item>
      <el-form-item v-if="showMoreS" v-for="(item,index) of fieldList" :key="index" class="elFormItem" :label="item.attribute.titName">
        <el-input v-if="item.componentName=='stringTem'||item.componentName=='numberTem'" :maxlength="46" :clearable="true" placeholder="请输入" v-model.trim="item.attribute.filedValue"></el-input>
        <el-select filterable style="width:100%" v-if="item.componentName=='moreSelectTem'" v-model="item.attribute.filedValue" placeholder="请选择">
          <el-option v-for="(it,ind) of item.attribute.selectList" :key="ind" :label="it.name" :value="it.name"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="elFormItem" style="width:auto;" label="">
        <el-button @click="searchTicket('search')" type="primary" icon="el-icon-search">搜索</el-button>
        <el-button @click="searchTicket('empty')">清空</el-button>
        <el-button @click="showMoreS=!showMoreS" :icon="showMoreS?'el-icon-arrow-up':'el-icon-arrow-down'" type="text">{{showMoreS?'收起':'展开'}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { activation_status } from "@/utils/index.js";
import pickerOptions from "@/components/js/pickerOptions.js";
export default {
  data() {
    return {
      saveSearchFrom: {}, //保存点击搜索的表单
      dateSelect: "", //下单日期
      activation_status: activation_status, // 激活状态
      pickerOptions: pickerOptions,
      info: {}, //搜索表单信息
      showMoreS: false //是否展示更多
    };
  },
  computed: {
    fieldList() {
      return this.$store.state.activityId.fieldList;
    },
    //渠道来源
    sourceList() {
      return this.$store.state.activityId.sourceList;
    }
  },
  methods: {
    //搜索
    searchTicket(item) {
      if (item == "search") {
        if (this.dateSelect) {
          this.info.createStartDate = new Date(this.dateSelect[0]).getTime();
          this.info.createEndDate = new Date(this.dateSelect[1]).getTime();
        }
        for (let i = 0; i < this.fieldList.length; i++) {
          this.info[this.fieldList[i].attribute.filedCode] =
            this.fieldList[i].attribute.filedValue || "";
        }
      }
      if (item == "empty") {
        this.info = {};
        for (let i = 0; i < this.fieldList.length; i++) {
          this.info[this.fieldList[i].attribute.filedCode] = "";
          this.fieldList[i].attribute.filedValue = "";
        }
        this.dateSelect = "";
      }
      if (this.info.haveEnterFace === "") {
        delete this.info.haveEnterFace;
      }
      let saveSearchFrom = {
        ...this.info
      };
      // 渠道来源为赠票则特殊处理
      if (saveSearchFrom.pricegroupId == "6868686686868686") {
        saveSearchFrom.pricegroupId = "";
        saveSearchFrom.source = 3;
      }
      // 转赠票
      if (saveSearchFrom.pricegroupId == "666666") {
        saveSearchFrom.pricegroupId = "";
        saveSearchFrom.source = 5;
      }
      this.saveSearchFrom = JSON.parse(JSON.stringify(saveSearchFrom));
      this.$emit("queryTicketsByData");
    }
  }
};
</script>
